<template>
  <view
    class="w-[90%] flex justify-between"
    style="padding: 30rpx 0; border-bottom: 1px solid #f0f0f0"
  >
    <img src="@/static/10001.jpeg" alt="" class="w-160rpx h-140rpx" />
    <view class="justify-between items-start flex-col w-490rpx flex" style="">
      <wd-text text="优赛明 维生素E乳" custom-class="yaopinBox"></wd-text>
      <view class="flex items-center" style="margin: 11rpx 0">
        <view
          class="flex bg-[#16c2a3] h-40rpx rounded-[2px] border border-solid border-[#16c2a3]"
          style="align-items: center"
        >
          <wd-text text="处药方" class="cyfBox"></wd-text>
        </view>
        <wd-text text="85ml" class="hssBox"></wd-text>
      </view>
      <view class="justify-between w-[100%] flex" style="">
        <wd-text text="¥ 25.00" custom-class="zjqBox"></wd-text>
        <img
          v-if="valueA == 0"
          src="@/static/exports/add@1x.png"
          alt=""
          class="w-40rpx h-40rpx"
          @click="addValueA"
        />
        <wd-input-number v-else v-model="valueA" :min="0" @change="handleChange1" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
const valueA = ref<number>(0);
function handleChange1() {
  console.log(valueA.value);
}
function addValueA() {
  valueA.value += 1;
}
</script>
<style lang="scss" scoped>
.youhuiBox {
  font-size: 24rpx !important;
  font-weight: regular !important;
  line-height: 36rpx !important;
  color: #f2994a !important;
  text-align: left;
  letter-spacing: 0px;
}
.qianBox {
  font-size: 48rpx !important;
  font-weight: bold !important;
  line-height: 48rpx !important;
  color: #121826 !important;
  text-align: left;
  letter-spacing: 0px;
}
.mingxiBox {
  font-size: 24rpx !important;
  font-weight: regular !important;
  line-height: 36rpx !important;
  color: #3c3e42 !important;
  text-align: left;
  letter-spacing: 0px;
}
.yaopinBox {
  font-size: 30rpx !important;
  font-weight: medium !important;
  line-height: 42rpx !important;
  color: #121826 !important;
  text-align: left;
  letter-spacing: 0px;
}
.cyfBox {
  font-size: 24rpx !important;
  font-weight: regular !important;
  line-height: 32rpx !important;
  color: #ffffff !important;
  text-align: left;
  letter-spacing: 0px;
}
.hssBox {
  font-size: 28rpx !important;
  font-weight: regular !important;
  line-height: 42rpx !important;
  color: #979797 !important;
  text-align: left;
  letter-spacing: 0px;
}
.zjqBox {
  font-size: 32rpx !important;
  font-weight: semibold !important;
  line-height: 48rpx !important;
  color: #eb5757 !important;
  text-align: left;
  letter-spacing: 0px;
}
</style>
